<template>
  <div class="page-adView">
    <a-tabs
      v-model:activeKey="adState.status"
      :tabBarGutter="39"
      :tabBarStyle="{ borderBottom: 'none' }"
      @change="handleChange"
      class="h-full"
    >
      <a-tab-pane :key="1" tab="启用中广告库" force-render :v-loading="state.activeLoading" class="h-full">
        <filter-view :type="adState.status" @update-list="() => getActiveList()" />
        <div v-if="state.activeLoading" class="flex items-center justify-center w-full h-full">
          <a-spin :spinning="state.activeLoading" size="large" tip="加载中..." />
        </div>
        <template v-else class="h-full">
          <div v-if="state.adList?.length ?? 0 > 0" class="h-full">
            <div v-if="!statusState.isActiveModule" class="h-[96%] overflow-auto" @scroll="scrollEvent($event)">
              <module-list
                :list="state.adList"
                :type="adState.status"
                v-if="!statusState.isActiveModule"
                @update-list="() => getActiveList()"
              />
            </div>
            <div v-else>
              <normal-list :list="state.adList" :type="adState.status" @update-list="() => getActiveList()" />
            </div>
          </div>
          <NoData v-else :status="adState.status" />
        </template>
        <a-pagination
          v-if="statusState.isActiveModule"
          show-size-changer
          :defaultPageSize="10"
          :pageSizeOptions="['10', '20', '50', '100']"
          :show-total="(total:number)=>`共${total}条`"
          :total="pagination.total"
          @change="handlePaginationChange"
        />
      </a-tab-pane>
      <a-tab-pane :key="2" tab="已禁用" force-render>
        <filter-view :type="adState.status" @update-list="() => getDisabledList()" />
        <div v-if="state.disabledLoading" class="flex items-center justify-center w-full h-full">
          <a-spin :spinning="state.disabledLoading" size="large" tip="加载中..." />
        </div>
        <template v-else class="h-full">
          <div v-if="state.disableList?.length ?? 0 > 0" class="h-full">
            <div v-if="!statusState.isActiveModule" class="h-[96%] overflow-auto" @scroll="scrollEvent2($event)">
              <module-list :list="state.disableList" :type="adState.status" @update-list="() => getDisabledList()" />
            </div>
            <div v-else>
              <normal-list :list="state.disableList" :type="adState.status" @update-list="() => getDisabledList()" />
            </div>
          </div>
          <NoData v-else :status="adState.status" text="还没有禁用中的广告库" />
        </template>
        <a-pagination
          v-if="statusState.isActiveModule"
          show-size-changer
          :defaultPageSize="10"
          :pageSizeOptions="['10', '20', '50', '100']"
          :show-total="(total:number)=>`共${total}条`"
          :total="pagination2.total"
          @change="handlePaginationChange2"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, watch, nextTick } from 'vue'
import ModuleList from './components/ModuleList.vue'
import NormalList from './components/NormalList.vue'
import FilterView from './components/FilterView.vue'
import type { AdItem } from '@/types/advertising/advertising'
import { adState, statusState, resetState } from './state'
import NoData from './components/NoData.vue'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const {
  advertising: { list_library }
} = apis

interface IState {
  activeLoading: boolean
  disabledLoading: boolean
  adList: AdItem[]
  disableList: AdItem[]
}
const state = reactive<IState>({
  activeLoading: false,
  disabledLoading: false,
  adList: [],
  disableList: []
})

const getActiveList = () => {
  state.activeLoading = true
  console.log('启用中: ', pagination)
  if (!adState.id) adState.id = undefined
  // 启用中列表
  list_library({ ...adState, ...pagination })
    .then((res: any) => {
      state.adList = res.list
      pagination.total = res?.total ?? 0
      state.activeLoading = false
      //处理下一页，第一条删除问题
      if (pagination.Offset >= (res?.list ?? 0) && pagination.total != 0) {
        pagination.Offset -= pagination.Limit
        getActiveList()
      }
    })
    .catch(() => {
      state.activeLoading = false
    })
}
const getDisabledList = () => {
  state.disabledLoading = true
  // 禁用中列表
  console.log('禁用中: ', pagination2)
  list_library({ ...adState, ...pagination2 })
    .then((res: any) => {
      state.disableList = res.list
      state.disabledLoading = false
      pagination2.total = res?.total ?? 0
      //处理下一页，第一条删除问题
      if (pagination2.Offset >= (res?.list ?? 0) && pagination2.total != 0) {
        pagination2.Offset -= pagination2.Limit
        getDisabledList()
      }
    })
    .catch(() => {
      state.disabledLoading = false
    })
}

const handleChange = (key: number) => {
  // statusState.isActiveModule = false
  console.log('key: ', key)
  pagination.Offset = 0
  isFinished.value = false
  pagination2.Offset = 0
  isFinished2.value = false
  resetState()
  if (key === 1) {
    getActiveList()
  } else {
    getDisabledList()
  }
}
const isFinished = ref(false)
const pagination = reactive({
  Offset: 0,
  Limit: 10,
  total: 0
})
/**
 * 分页改变事件
 */
const handlePaginationChange = (size: number, limit: number) => {
  pagination.Limit = limit
  pagination.Offset = (size - 1) * limit
  getActiveList()
}
const scrollEvent = (e: any) => {
  const { target } = e
  let scrollTop = target.scrollTop
  // 获取可视区的高度
  let clientHeight = target.clientHeight
  // 获取滚动条的总高度
  let scrollHeight = target.scrollHeight
  console.log('scrollTop: ', +scrollTop.toFixed(0), clientHeight, scrollHeight)
  //到底了
  //是否继续加载且已完成加载
  if (+scrollTop.toFixed(0) + clientHeight == scrollHeight && !isFinished.value) {
    pagination.Offset += 10 //分页器自增10
    console.log('到底了')
    // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
    list_library({ ...adState, ...pagination }).then((res: any) => {
      console.log('执行111')
      if (res.list.length > 0) {
        state.adList = [...state.adList, ...res.list]
      } else {
        message.warning('没有更多了')
        isFinished.value = true
      }
    })
  }
}
const isFinished2 = ref(false)
const pagination2 = reactive({
  Offset: 0,
  Limit: 10,
  total: 0
})
/**
 * 分页改变事件
 */
const handlePaginationChange2 = (size: number, limit: number) => {
  console.log('size, limit: ', size, limit)
  pagination2.Limit = limit
  pagination2.Offset = (size - 1) * limit
  getDisabledList()
}
const scrollEvent2 = (e: any) => {
  const { target } = e
  let scrollTop = target.scrollTop
  // 获取可视区的高度
  let clientHeight = target.clientHeight
  // 获取滚动条的总高度
  let scrollHeight = target.scrollHeight
  console.log('scrollTop: ', +scrollTop.toFixed(0), clientHeight, scrollHeight)
  //到底了
  //是否继续加载且已完成加载
  if (+scrollTop.toFixed(0) + clientHeight == scrollHeight && !isFinished2.value) {
    pagination2.Offset += 10 //分页器自增10
    console.log('到底了')
    // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
    list_library({ ...adState, ...pagination2 }).then((res: any) => {
      console.log('执行111')
      if (res.list.length > 0) {
        state.disableList = [...state.disableList, ...res.list]
      } else {
        message.warning('没有更多了')
        isFinished2.value = true
      }
    })
  }
}
watch(
  () => statusState.isActiveModule,
  () => {
    pagination2.Offset = 0
    isFinished2.value = false
    pagination.Offset = 0
    isFinished.value = false
    setTimeout(() => {
      if (adState.status === 2) getDisabledList()
      getActiveList()
    })
  },
  {
    deep: true,
    immediate: true
  }
)
onMounted(() => {
  if (adState.status === 1) {
    getActiveList()
  } else {
    getDisabledList()
  }
})
</script>

<style lang="less" scoped>
.page-adView {
  height: 100%;
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }
  :deep(.ant-tabs-content) {
    height: 100%;
  }
  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }

  :deep(.ant-tabs-nav) {
    width: 168px;
  }

  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
